<html>
<head>
<title>自动加载更多</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=false" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<script src="js/jquery-3.2.0.min.js" type="text/javascript"></script>
<style>
    * {margin:0;padding:0;}
    #table_container {
        text-align:center;
        background:#DDDDDD;
        padding-bottom:0;
        overflow-y:auto;
        overflow-x:hidden;
        height:100%;
    }
    .table_row {
        height:56px;
        //margin:1px 0.5em;
        background:white;
        position:relative;
        padding:5px 0 5px 0;
    }
    .table_row::after {
	position:absolute;
	height:1px;
	background:#DDDDDD;
        width:94%;
	z-index:1;
	display:block;
	content:"";
	margin:0;
	padding:0;
	bottom:0;
	left:3%;
	right:3%;
    }
    .table_row:link {
        background: white;
    }
    
    .table_row:visited {
        background: white;
    }
     
    .table_row:hover {
        background: white;
    }

    .table_row:active {
        background: #DDDDDD;
    }

    
    .table_row_img {
        border-radius:56px;
        width:56px;
        height:56px;
        position:absolute;
	bottom:6px;
        left:10px;
    }
    .table_row_title {
        position:absolute;
        top:0px;
        left:76px;
        margin:0.2em 0 0 0;
    }
    .table_row_desc {
        position:absolute;
        left:76px;
        margin:0 0 0.5em 0;
        bottom:0;
    }
    .table_row_arrow {
        position:absolute;
        right:10px;
        vertical-align:middle;
        top:50%;
        margin-top:-14px;
    }
    #progress_bar {
        display:block;
    }
</style>
<script type="text/javascript">
    var pageIndex = 1;
    var pageCount = 10;
    var $progressBar = null;
    var loadingData = false;
    
    /*
 * 打印 JavaScript 函数调用堆栈
 */
    function printCallStack() {
        var i = 0;
        var fun = arguments.callee;
        do {
            fun = fun.arguments.callee.caller;
            console.log(++i + ': ' + fun);
        } while (fun);
    }

    function createProgressBar() {
        $progressBar = $("<div id='progress_bar'><img src='images/small_progress.gif'/></div>");
        $progressBar.children("img").width(24).height(24);
        $progressBar.css({"margin-top":"10px", "margin-bottom":"10px"})
    }
    
    function showProgressBar() {
        $("#table_container").append($progressBar);
    }
    
    function hideProgressBar() {
        $("#progress_bar").remove();
    }

    function createTableRow(imgsrc, title, desc) {
        var $tableRow = $("<div></div>");
        $tableRow.addClass("table_row");
        
        var $imgRow = $("<img onclick='javascript:void(0);'></img");
        $imgRow.addClass("table_row_img");
        $imgRow.attr("src", imgsrc);
        $imgRow.appendTo($tableRow);
        
        var $h4Row = $("<h2></h2>");
        $h4Row.addClass("table_row_title");
        $h4Row.text(title);
        $h4Row.appendTo($tableRow);

        var $descRow = $("<p></p>");
        $descRow.addClass("table_row_desc");
        $descRow.text(desc);
        $descRow.appendTo($tableRow);
        
        var $arrowRow = $("<img></img>");
        $arrowRow.addClass("table_row_arrow");
        $arrowRow.attr("src", "images/right_arrow.png");
        $arrowRow.appendTo($tableRow);

        return $tableRow;
    }
    
    function afterScroll() {
        var documentHeight = $(document).height();;
        var windowHeight = $(window).height();
        var scrollTop = $("#table_container")[0].scrollTop;
        var scrollHeight = $("#table_container")[0].scrollHeight;
        var divHeight = $("#table_container").height();
        if (!loadingData && scrollTop > 0 && scrollTop + divHeight >= scrollHeight) {
            loadingData = true;
            console.log("top : " + scrollTop + " , divHeight : " + divHeight + " , scrollHeight : " + scrollHeight);
            showProgressBar();
            $("#table_container")[0].scrollTop = scrollHeight;
            setTimeout(loadNextPageData, 5000);
        }
    }
    
    function loadNextPageData() {
        hideProgressBar();
        pageIndex++;
        loadTableRowList();
        loadingData = false;
    }

    function loadTableRowList() {
        var itemNum = 0;
        for (var index = 0; index < pageCount; index++) {
            itemNum = (index + (pageIndex-1) * pageCount);
            var $tableRow = createTableRow("images/ic_launcher.png", "title" + itemNum, "desc" + itemNum);
            $tableRow.click(onItemClick);
	    // $tableRow.on("touchstart", function(e){e.preventDetault();},false);
            $("#table_container").append($tableRow);
        }
    }
    
    function registerDivScroll() {
        $("#table_container").scroll(function() {
            afterScroll();
        });
    }
    
    function onItemClick(e) {
        var src = $(this).children(".table_row_img").attr("src");
        var title = $(this).children(".table_row_title").text();
        var desc = $(this).children(".table_row_desc").text();
        alert("src : " + src + "\ntitle : " + title + "\ndesc : " + desc);
    }

    $(document).ready(function () {
            createProgressBar();
            loadTableRowList();
            afterScroll();
            registerDivScroll();
        }
    );
</script>
</head>
<body>
<div id="table_container">
    <!--
    <div class="table_row">
        <img src="images/ic_launcher.png" class="table_row_img"/>
        <h4 class="table_row_title">Title1</h4>
        <p class="table_row_desc">Description1</p>
        <img src="images/ic_launcher.png" class="table_row_img"/>
    </div>
    -->

</div>
</body>
</html>
